import React, { useRef, useState, useEffect } from 'react';
import { BaseDlg, obj_str, useForm, ck_float, NuiBt, IkInput } from 'sui';
import { NumBoard } from 'base/ctl/keyboard';

const DlgInput = ({ open, setOpen, hcmd }) => {
    const msn_ref = useRef(null);
    const [value, setValue] = useState();
    const form = useForm(setValue);

    useEffect(() => {
        if (!open) {
            return;
        }

        setValue(null);
        msn_ref.current.focus();
    }, [open]);

    const hok = () => {
        const ck = {
            msn: (v) => ck_float(v, "请输入值"),
        };

        if (!form.hcheck(ck, value)) {
            return;
        }

        setOpen(false);
        hcmd(obj_str(value, "msn"));
    };

    const lst = [
        {ref: msn_ref, k: "msn"},
    ];

    return (
        <BaseDlg open={open} title="输入值" width="lg">
            <div className="flex flex-col">
                <div className="ml-4">
                    <IkInput label="值" name="msn" form={form} value={value} width="w-px-msn" href={msn_ref}/>
                    <NumBoard className="mt-3" lst={lst} value={value} setValue={setValue}/>
                </div>
                <div className="inline-flex justify-end">
                    <NuiBt className="h-16" hcmd={() => setOpen(false)}>取消</NuiBt>
                    <NuiBt className="ml-12 mr-4 h-16" hcmd={hok}>确定</NuiBt>
                </div>
            </div>
        </BaseDlg>
    );
};

export {DlgInput};
